<template>
  <div>
    <div class="layout">
      <div>
        <BackNav left-text="返回" left-arrow title="地址列表"></BackNav>
      </div>
      <div class="top"></div>
      <div class="wrapper">
        <!-- 地址管理 -->
        <div class="main" v-if="show">
          <div class="list-item" v-for="(item, index) in address" :key="index">
            <div class="list-left">
              <div class="local-bottom">
                <div class="username">{{ item.name }}</div>
                <div class="phone">{{ item.tel }}</div>
                <div class="text" v-if="item.isDefault == 1 ? true : false">
                  默认
                </div>
              </div>
              <div class="localtetx">
                {{ item.province }} {{ item.city }} {{ item.county }}
                {{ item.addressDetail }}
              </div>
            </div>
            <div class="list-right" @click="edit(item.aid)">
              <van-icon name="edit" color="#BEB7B3" size="20" />
            </div>
          </div>
        </div>
      </div>
      <div class="addr">
        <van-button
          type="info"
          round
          block
          color="#0c43ba"
          class="btn"
          click="add"
          to="newaddress"
          >新增地址</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import BackNav from "../components/BackNav";
export default {
  data() {
    return {
      show: false,
      address: [{
        name:'xiao'
      }],
    };
  },
  components: {
    BackNav,
  },
  created() {
    this.findAddress();
  },
  methods: {
    //   查询地址
    findAddress() {
      this.axios({
        method: "get",
        url: "/findAddress",
      })
        .then((res) => {
          if (res.data.code == "20000") {
            if(res.data.result.length==0){
              this.show=fasle
            }else{
              this.show=true;
            }
            this.address = res.data.result;
          }
        })
        .catch((err) => {
          
        });
    },
    // 跳转到编辑页面
    edit(aid) {
      
      this.$router.push({ name: "EditAddress", params: { aid } });
    },
  },
};
</script>
<style lang="less" scoped>
.layout {
  background: #f0f0f0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  .top {
    height: 100px;
    background: #0c43ba;
  }
  .wrapper {
    width: 90%;
    background: #fff;
    position: relative;
    top: -20px;
    border-radius: 10px;
    margin: 0 auto;
    .main {
      max-height: 450px;
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      .list-item {
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #e9e9e9;
        &:last-child{
          border-bottom: 0;
        }
        .list-left {
          padding: 10px;
          .local-bottom {
            display: flex;
            align-items: center;
            font-size: 14px;
            .username {
              color: #0c34ba;
              font-weight: bold;
            }
            .phone {
              margin: 0 20px;
            }
            .text {
              background: #0c43ba;
              color: white;
              border-radius: 10px;
              padding: 0px 8px;
            }
          }
          .localtetx {
            margin-top: 10px;
            font-size: 14px;
            color: #999999;
          }
        }
        .list-right {
          margin-left: auto;
        }
      }
    }
  }
  .addr {
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    .btn {
      width: 90%;
      margin: 0 auto;
    }
  }
}
</style>